<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易的一个编辑器的实现</title>
    <link rel="stylesheet" href="./editor.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2347274_ie4vwp49mfh.css">
</head>
<body>
<h3 style="text-align: center">徐氏编辑器</h3>
<!--结构-->
<div class="editor_box">
    <div class="editor_tool">
        <ul class="first">
            <li class="iconfont icon-editor-bold">
                <input type="checkbox" id="bold" name="fontWeight" value="bold">
            </li>
            <li class="iconfont icon-editor-italic">
                <input type="checkbox" id="italic" name="fontStyle" value="Italic" class="italic">
            </li>
            <li class="iconfont icon-editor-underline">
                <input type="checkbox" id="underline" name="textDecoration" value="Underline" class="underline">
            </li>
            <li class="iconfont icon-editor">
                <select id="fontFamily">
                    <option value="SimSun" selected>宋体</option>
                    <option value="NSimSun" selected>新宋体</option>
                    <option value="SimHei" selected>黑体</option>
                    <option value="FangSong">仿宋</option>
                    <option value="FangSong_GB2312">仿宋_GB2312</option>
                    <option value="KaiTi">楷体</option>
                    <option value="KaiTi_GB2312">楷体_GB2312</option>
                </select>
            </li>
            <li class="iconfont icon-editor-font-size">
                <select id="fontSize">
                    <option selected>12px</option>
                    <option>14px</option>
                    <option>16px</option>
                    <option>18px</option>
                    <option>20px</option>
                </select>
            </li>
            <li class="iconfont icon-color">
                <select id="color">
                    <option selected>black
                    <option>silver</option>
                    <option>gray</option>
                    <option>white</option>
                    <option>maroon</option>
                    <option>red</option>
                    <option>purple</option>
                    <option>fuchsia</option>
                    <option>green</option>
                    <option>lime</option>
                    <option>olive</option>
                    <option>yellow</option>
                    <option>navy</option>
                    <option>blue</option>
                    <option>teal</option>
                    <option>aqua</option>
                </select>
            </li>
        </ul>
        <ul class="second">
            <li class="iconfont icon-editor-link" id="lnk"></li>
            <li class="iconfont icon-editor-image" id="img"></li>
        </ul>
        <ul class="three">
            <li class="iconfont icon-editor-align-left" id="lf">
                <input type="radio" id="left" name="textAlign" value="left" checked>
            </li>
            <li class="iconfont icon-editor-align-center" id="md">
                <input type="radio" id="center" name="textAlign" value="center">
            </li>
            <li class="iconfont icon-editor-align-right" id="rg">
                <input type="radio" id="right" name="textAlign" value="right">
            </li>
        </ul>
    </div>
    <div class="editor_text" id="editor">
        <div contenteditable="true"></div>
    </div>
</div>
<script src="./editor.js"></script>
</body>
</html>